<template>
    <div id="detail">
        <detail-nav-bar ref="nav"  class="detail-nav" @titleClick='titleClick'/>
        
        <scroll :probe-type='3' class="content" ref="scroll" @scroll='contentScroll'>
           <ul>
               <li v-for='item in $store.state.carList'>{{item}}</li>
           </ul>
           
            <detail-swiper :top-images='topImages' />
            <detail-base-info :goods='goods'/>
            <detail-shop-info :shop='shop'/>
            <detail-goods-info :detail-info='detailInfo' @imgLoad='imgLoad'/>
            <detail-param-info ref="params" :paramInfo='paramInfo'/>
            <detail-common-info ref="comment" :comment-info='commentInfo' />
            <goods-list ref="recommend" :goods='recommends'></goods-list>

        </scroll>
        <detail-bottom-bar @addToCart='addToCart'/>

        <back-top @click.native='backClick' v-show='isShow'/>

    </div>
</template>

<script>
import DetailNavBar from './childComps/DetailNavBar'
import DetailSwiper from './childComps/DetailSwiper'
import DetailBaseInfo from './childComps/DetailBaseInfo'
import DetailShopInfo from './childComps/DetailShopInfo'
import DetailGoodsInfo from './childComps/DetailGoodsInfo'
import DetailParamInfo from './childComps/DetailParamInfo'
import DetailCommonInfo from './childComps/DetailCommonInfo'
import GoodsList from '../../components/content/goods/GoodsList'
import DetailBottomBar from './childComps/DetailBottomBar'

import Scroll from 'components/common/scroll/Scroll'
import {getDetail,getRecommend,Goods,Shop,GoodsParam} from 'network/detail'
    
import {itemListenerMixin,backTopMixin} from 'common/mixin'
import { debounce } from '../../common/utils'

    export default {
        name: 'Detail',
        components:{
            DetailNavBar,
            DetailSwiper,
            DetailBaseInfo,
            DetailShopInfo,
            Scroll,
            DetailGoodsInfo,
            DetailParamInfo,
            DetailCommonInfo,
            GoodsList,
            DetailBottomBar
        },
        data(){
            return {
                iid:null,
                topImages:[],
                goods:{},
                shop:{},
                detailInfo:{},
                paramInfo:{},
                commentInfo:{},
                recommends:[],
                themeTopYs:[],
                getThemeTopY:null,
                currentIndex:0,
            }
        },
        mixins:[itemListenerMixin,backTopMixin],
        created(){
            // 1、保存传入的iid
            this.iid=this.$route.params.iid

            // 2、根据iid请求详情数据
            getDetail(this.iid).then(res=>{
                // 1、获取数据
                const data=res.result;
                // 2、获取顶部的图片数据
                this.topImages=data.itemInfo.topImages
                // 3、获取GoodsInfo的数据
                this.goods=new Goods(data.itemInfo,data.columns,data.shopInfo.services);
                // 4、获取商家信息
                this.shop=new Shop(data.shopInfo);
                // 5、获取商品详细信息
                this.detailInfo=data.detailInfo;
                // 6、获取参数信息
                this.paramInfo=new GoodsParam(data.itemParams.info,data.itemParams.rule)
                // 7、去除评论信息
                if(data.rate.cRate!=0){
                    this.commentInfo=data.rate.list[0]
                }

                // 值不对，图片的高度没有计算在内
                // this.$nextTick(()=>{
                //     // 根据最新的数据，对应的dom是应景呗渲染出来的
                //     // 但是图片还没有加载出来
                //     this.themeTopYs=[]

                //     this.themeTopYs.push(0);
                //     this.themeTopYs.push(this.$refs.params.$el.offsetTop);
                //     this.themeTopYs.push(this.$refs.comment.$el.offsetTop);
                //     this.themeTopYs.push(this.$refs.recommend.$el.offsetTop);
                //     // console.log(this.themeTopYs);
                // })
            })

            // 3、请求推荐的数据
            getRecommend().then(res=>{
                // console.log(res);
                this.recommends=res.data.list
            })

            // 4、给getThemeTopY复制
            this.getThemeTopY=debounce(()=>{
                this.themeTopYs=[]
                this.themeTopYs.push(0);
                this.themeTopYs.push(this.$refs.params.$el.offsetTop);
                this.themeTopYs.push(this.$refs.comment.$el.offsetTop);
                this.themeTopYs.push(this.$refs.recommend.$el.offsetTop);
                // console.log(this.themeTopYs);
            },100)
       },
        methods:{
            addToCart(){
                //获取购物车需要显示的信息
                const product={};
                product.image=this.topImages[0];
                product.title=this.goods.title;
                product.desc=this.goods.desc;
                product.price=this.goods.realPrice;
                product.iid=this.iid;

                // 将商品添加到购物车里面
                // this.$store.commit('addCart',product);
                this.$store.dispatch('addCart',product);
            },
            imgLoad(){
                this.$refs.scroll.refresh();

                this.$nextTick(()=>{
                    // 根据最新的数据，对应的dom是应景呗渲染出来的
                    // 但是图片还没有加载出来
                    this.getThemeTopY()
                })
            },
            titleClick(index){
                // console.log(index);
                this.$refs.scroll.scrollTo(0,-this.themeTopYs[index],100);
            },
            contentScroll(position){
                // console.log(position);
                // 获取y值
                const positionY=-position.y;
                // positiony和主体中中进行对比
                // for(let i in this.themeTopYs){  //i类型是个字符串
               let length=this.themeTopYs.length;
               for(let i =0;i<length;i++){  
                //    if(positionY>this.themeTopYs[i] && positionY<this.themeTopYs[i+1]){
                //        console.log(i);
                //    }
                    if(this.currentIndex!==i && ((i<length-1 && positionY>=this.themeTopYs[i] && positionY < this.themeTopYs[i+1])|| (i===length - 1 && positionY >= this.themeTopYs[i]))){
                        this.currentIndex=i;
                        // console.log(this.currentIndex);
                        this.$refs.nav.currentIndex=this.currentIndex

                    }
                }

                // 
                this.listenShowBackTop(position);

            }
        },
        destroyed(){
            this.$bus.$off('itemImgLoad', this.itemImgListener);
        }

    }
</script>

<style scoped>
    #detail{
        position: relative;
        z-index: 9;
        background-color: #fff;
        height: 100vh;
    }
    .content{
        height: calc(100% - 44px);
       
    }
    .detail-nav{
        position: relative;
         z-index:9;
         background-color: #fff;
    }
</style>